<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>List - UIkit tests</title>
        <script src="js/test.js"></script>
        <style>

            @supports not selector(::marker) {
                .uk-list > li[value]::before {
                    content: attr(value) "\200A.\00A0";
                }
            }

        </style>
    </head>

    <body>

        <div class="uk-container">

            <h1>List</h1>

            <h2>Marker</h2>

            <div class="uk-margin">
                <select id="js-color-switcher" class="uk-select uk-form-width-small" aria-label="Color switcher">
                    <option value="">Default</option>
                    <option value="uk-list-muted">Muted</option>
                    <option value="uk-list-emphasis">Emphasis</option>
                    <option value="uk-list-primary">Primary</option>
                    <option value="uk-list-secondary">Secondary</option>
                </select>
            </div>

            <div class="uk-child-width-1-6" uk-grid>
                <div>

                    <h3>Disc</h3>

                    <ul class="uk-list uk-list-disc">
                        <li>List <a>item</a> 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>
                            List item 5
                            <ul class="uk-list uk-list-disc">
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul class="uk-list uk-list-disc">
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                        <li>List item 7</li>
                    </ul>

                </div>
                <div>

                    <h3>Circle</h3>

                    <ul class="uk-list uk-list-circle">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul class="uk-list uk-list-circle">
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul class="uk-list uk-list-circle">
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                        <li>List item 7</li>
                    </ul>

                </div>
                <div>

                    <h3>Square</h3>

                    <ul class="uk-list uk-list-square">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul class="uk-list uk-list-square">
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul class="uk-list uk-list-square">
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                        <li>List item 7</li>
                    </ul>

                </div>
                <div>

                    <h3>Decimal</h3>

                    <ul class="uk-list uk-list-decimal">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul class="uk-list uk-list-decimal">
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul class="uk-list uk-list-decimal">
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                        <li value="10">List item 7</li>
                    </ul>

                </div>
                <div>

                    <h3>Hyphen</h3>

                    <ul class="uk-list uk-list-hyphen">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul class="uk-list uk-list-hyphen">
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul class="uk-list uk-list-hyphen">
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                        <li>List item 7</li>
                    </ul>

                </div>
                <div>

                    <h3>Image Bullet</h3>

                    <ul class="uk-list uk-list-bullet">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul class="uk-list uk-list-bullet">
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul class="uk-list uk-list-bullet">
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                        <li>List item 7</li>
                    </ul>

                </div>
            </div>

            <h2>Style</h2>

            <div class="uk-child-width-1-4" uk-grid>
                <div>

                    <h3>Divider</h3>

                    <ul class="uk-list uk-list-divider">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Striped</h3>

                    <ul class="uk-list uk-list-striped">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Divider</h3>

                    <ul class="uk-list uk-list-divider uk-list-decimal">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
            </div>

            <h2>Large</h2>

            <div class="uk-child-width-1-4" uk-grid>
                <div>

                    <h3>Default</h3>

                    <ul class="uk-list uk-list-large">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Disc</h3>

                    <ul class="uk-list uk-list-large uk-list-disc">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>
                            List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Divider</h3>

                    <ul class="uk-list uk-list-large uk-list-divider">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Striped</h3>

                    <ul class="uk-list uk-list-large uk-list-striped">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
            </div>

            <h2>Collapse</h2>

            <div class="uk-child-width-1-4" uk-grid>
                <div>

                    <h3>Default</h3>

                    <ul class="uk-list uk-list-collapse">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Disc</h3>

                    <ul class="uk-list uk-list-collapse uk-list-disc">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>
                            List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Divider</h3>

                    <ul class="uk-list uk-list-collapse uk-list-divider">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
                <div>

                    <h3>Striped</h3>

                    <ul class="uk-list uk-list-collapse uk-list-striped">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4 with some more text wrapping into the next line</li>
                        <li>List item 5
                            <ul>
                                <li>List item 1</li>
                                <li>List item 2
                                    <ul>
                                        <li>List item 1</li>
                                        <li>List item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>List item 6</li>
                    </ul>

                </div>
            </div>

        </div>

        <script>

            const {$$, addClass, on, removeClass } = UIkit.util;

            on('#js-color-switcher', 'change', (e) => {
                const options = $$('option', e.target).map(({value}) => value);
                for (const el of $$('.uk-list')) {
                    removeClass(el, options);
                    addClass(el, e.target.value);
                }
            });

        </script>

    </body>
</html>
